import Head from 'next/head'
import { Row, Col, Breadcrumb, Affix, BackTop } from 'antd'
import { CalendarOutlined, FolderOpenOutlined, FireOutlined } from '@ant-design/icons'
import React, { useState, useEffect } from 'react';
import Header from '../component/Header'
import Author from '../component/Author'
import Advert from '../component/Advert'
import Footer from '../component/Footer'
import '../public/styles/common/detail.css'
import MD from '../component/MD';
import { detail as article } from '../api/detail'



const Detail = ({ id, data }) => {

  const [content, setContent] = useState(data)
  const md = MD(content.content)
  return (
    <div className="container" key={id}>
      <Head>
        <title>老王的前端成长记录-文章详情</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header path="/list" />
      <Row className="common-main" type="flex" justify="center">
        <Col className="common-left" xs={24} sm={24} md={16} lg={14} xl={14}>
          <div>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item><a href={"/list?type_id=" + content.typeId}>{content.type}</a></Breadcrumb.Item>
                <Breadcrumb.Item>{content.title}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className="detailed-title">
                {content.title}
              </div>
              <div className="list-icon center">
                <span><CalendarOutlined /> {content.addTime}</span>
                <span><FolderOpenOutlined /> {content.type}</span>
                <span><FireOutlined /> {content.view_count}人</span>
              </div>
              <div className="detailed-content" dangerouslySetInnerHTML={{ __html: md.html }}>
              </div>
            </div>
          </div>
        </Col>
        <Col className="common-right" xs={0} sm={0} md={8} lg={6} xl={4}>
          <Author />
          <Advert />
          <Affix offsetTop={50}>
            <div className="detailed-nav common-box">
              <div className="nav-title">文章目录</div>
              <div className="toc-list">
                {md.nav}
              </div>
            </div>
          </Affix>
        </Col>
      </Row>
      <BackTop />
      <Row>
        <Footer />
      </Row>
    </div >
  )
}

Detail.getInitialProps = async (props) => {
  const content = await article(props.query.id)
  return {
    id: props.query.id,
    data:content.data

  }
}

export default Detail
